import "./index.scss";
import { useState, useEffect } from "react";
import {
  SearchOutlined,
  DoubleLeftOutlined,
  CloseOutlined,
} from "@ant-design/icons";
import {
  Divider,
  Button,
  Table,
  Form,
  Input,
  Drawer,
  Select,
  Modal,
  Breadcrumb,
} from "antd";
import type { ColumnsType } from "antd/es/table";
import type { DrawerProps, RadioChangeEvent } from "antd";
import { useNavigate } from "react-router-dom";
import { get } from '../../../../apis/system/roleManagementApi'
interface a {
  roleName: string;
}
interface DataType {
  key: React.Key;
  roleType: string;
  roleName: string;
  creator: string;
  creationTime: string;
  status: string;
}

//搜索
const RoleManagement: React.FC = () => {
  /* 一上来请求数据 */
useEffect(() => {
  getUser();
}, [])
const getUser = () => {
  get(1).then((res:{[propName:string]:any}) => {
    console.log(res)
    let _data = res.data.map((v:{id:number}) => {
      return { ...v, key: v.id }
    })
    setData(_data);
  })
}
  const navigate = useNavigate();
  //搜索
  const onSearch = (search:{ roleName: string; }) => {
    if (search.roleName.trim() == '') {
      getUser();
    } else {
      let _data = data.filter((v:{roleName:string}) => {
        return v.roleName.includes(search.roleName)
      })
      setData(_data);
    }

  };
  //关联用户
  const goAssociatedUsers = () => {
    navigate("/home/associatedUsers");
  };
  //高级筛选
  const senior = () => {
    if (open == false) {
      setOpen(true);
    } else {
      setOpen(false);
    }
  };
  // 表格数据
  const columns: ColumnsType<DataType> = [
    {
      title: "角色类型",
      dataIndex: "roleType",
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
    },
    {
      title: "创建者",
      dataIndex: "creator",
    },
    {
      title: "创建时间",
      dataIndex: "creationTime",
    },
    {
      title: "状态",
      dataIndex: "status",
      render: (text: string) => (
        <span>{text == "1" ? "正常" : text == "2" ? "停用" : ""}</span>
      ),
    },
  ];
  const [data, setData] = useState([]);
  // const data: DataType[] = [
  //   {
  //     key: "1",
  //     roleType: "机构角色",
  //     roleName: "学费管理员",
  //     creator: "admin",
  //     creationTime: "2021-01-01",
  //     status: "1",
  //   },
  //   {
  //     key: "2",
  //     roleType: "系统角色",
  //     roleName: "物业费管理员",
  //     creator: "admin",
  //     creationTime: "2021-01-01",
  //     status: "2",
  //   },
  //   {
  //     key: "3",
  //     roleType: "销售角色",
  //     roleName: "党费管理员",
  //     creator: "admin",
  //     creationTime: "2021-01-01",
  //     status: "2",
  //   },
  //   {
  //     key: "4",
  //     roleType: "John Brown",
  //     roleName: "系统管理员",
  //     creator: "admin",
  //     creationTime: "2021-01-01",
  //     status: "2",
  //   },
  //   {
  //     key: "5",
  //     roleType: "John Brown",
  //     roleName: "业务管理员",
  //     creator: "admin",
  //     creationTime: "2021-01-01",
  //     status: "1",
  //   },
  //   {
  //     key: "6",
  //     roleType: "Disabled User",
  //     roleName: "业务管理员",
  //     creator: "admin",
  //     creationTime: "2021-01-01",
  //     status: "1",
  //   },
  // ];
  const pagination = {
    defaultPageSize: 5,
    defaultCurrent: 1,
    total: data.length,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 15, 20],
  };
  //当前数据
  const [nowData, setNowData] = useState({});
  //选中表格数据
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`key值: ${selectedRowKeys}`, "数据: ", selectedRows[0]);
      setNowData({ ...selectedRows[0] });
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.roleType === "Disabled User", // Column configuration not to be checked
      roleType: record.roleType,
    }),
  };
  //高级筛选
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState<DrawerProps["placement"]>("top");
  const onClose = () => {
    setOpen(false);
  };
  const iStyle = {
    color: "#d6d6d6",
  };

  /* 编辑 */
  const [editForm] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = (record: any) => {
    //  console.log(record)
    //  record.a_type = record.a_type + ''
    console.log("当前数据", nowData);
    editForm.setFieldsValue({ ...nowData });
    setIsModalOpen(true);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onEdit = () => {
    const data = editForm.getFieldsValue(true);
    console.log("编辑数据", data);
  };

  //新增
  const [openAdd, setOpenAdd] = useState(false);
  const [placementAdd] = useState<DrawerProps["placement"]>("top");
  const onAdd = () => {
    console.log(444);
    setOpenAdd(true);
  };
  const onCloseAdd = () => {
    setOpenAdd(false);
  };
  const addStyle = {
    position: "absolute",
    top: "100px",
    left: "200px",
    // width:'1400px',
    display: "flex",
  };

  return (
    <div className="system">
      {/* 路径 */}
      <div className="title">
        <Breadcrumb separator=">">
          <Breadcrumb.Item>系统管理</Breadcrumb.Item>
          <Breadcrumb.Item href="#">角色管理</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <Divider />
      {/* 搜索 */}
      <div>
        <Form className="search" layout="inline" onFinish={onSearch}>
          <Form.Item>
            <Button
              type="primary"
              style={{ background: "#69657e" }}
              onClick={onAdd}
            >
              新增
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              onClick={showModal}
              type="primary"
              style={{ background: "#69657e" }}
            >
              修改
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="primary" style={{ background: "#69657e" }}>
              删除
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="primary" style={{ background: "#69657e" }}>
              授权
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              style={{ background: "#69657e" }}
              onClick={goAssociatedUsers}
            >
              关联用户
            </Button>
          </Form.Item>
          <Form.Item name="roleName">
            <Input placeholder="请输入管理员姓名" />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              style={{ background: "#69657e" }}
              icon={<SearchOutlined />}
              htmlType="submit"
            >
              搜索
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="primary" style={{ background: "#69657e" }}>
              重置
            </Button>
          </Form.Item>
          <Divider type="vertical" className="ver" />
          <Form.Item>
            <Button type="link" style={{ color: "#52a6ff" }} onClick={senior}>
              高级筛选
              <DoubleLeftOutlined rotate={270} style={iStyle} />
            </Button>
          </Form.Item>
        </Form>
      </div>
      {/* 高级筛选弹框 */}
      <div className="site-drawer-render-in-current-wrapper">
        <Drawer
          destroyOnClose={true}
          placement={placement}
          closable={false}
          onClose={onClose}
          open={open}
          key={placement}
          getContainer={false}
          height={150}
        >
          <Form className="senior" layout="inline" onFinish={onSearch}>
            <Form.Item label="角色类型" name="role">
              <Select style={{ width: 180 }} placeholder="请输入管理员姓名">
                <Select.Option value="系统角色">系统角色</Select.Option>
                <Select.Option value="机构角色">机构角色</Select.Option>
                <Select.Option value="销售角色">销售角色</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="角色名称" name="roleName">
              <Input placeholder="请输入管理员姓名" />
            </Form.Item>
            <Form.Item label="状态" name="status">
              <Select style={{ width: 180 }} placeholder="请输入管理员姓名">
                <Select.Option value="1">正常</Select.Option>
                <Select.Option value="2">停用</Select.Option>
              </Select>
            </Form.Item>
            <div
              className="seniorClose"
              onClick={() => {
                setOpen(false);
              }}
            >
              <CloseOutlined />
            </div>
            <div className="seniorBtn">
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  icon={<SearchOutlined />}
                  htmlType="submit"
                >
                  查询
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  icon={<SearchOutlined />}
                  htmlType="submit"
                >
                  重置
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>

      {/* 表格 */}
      <Table
        rowSelection={{
          type: "radio",
          ...rowSelection,
        }}
        bordered={true}
        columns={columns}
        dataSource={data}
        pagination={pagination}
      />

      {/* 编辑 */}
      <div className="add">
        <Drawer
          title="角色管理 - 修改"
          placement={placementAdd}
          onClose={handleCancel}
          open={isModalOpen}
          key={placement}
          contentWrapperStyle={{
            position: "absolute",
            top: "25%",
            left: "20%",
            width: "70%",
          }}
        >
          <Form
            form={editForm}
            className="addForm"
            layout="inline"
            onFinish={onSearch}
            style={{ position: "relative", justifyContent: "center" }}
          >
            <Form.Item
              label="角色类型"
              name="roleType"
              rules={[{ required: true }]}
            >
              <Select style={{ width: 180 }} placeholder="请选择">
                <Select.Option value="系统角色">系统角色</Select.Option>
                <Select.Option value="机构角色">机构角色</Select.Option>
                <Select.Option value="销售角色">销售角色</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="角色名称"
              name="roleName"
              style={{ margin: "0 10px 8px 8px" }}
              rules={[
                {
                  required: true,
                  message: "必须添加姓名",
                },
              ]}
            >
              <Input placeholder="请输入角色名称" />
            </Form.Item>
            <Form.Item label="状态" name="status" rules={[{ required: true }]}>
              <Select style={{ width: 180 }} placeholder="请选择">
                <Select.Option value="1">正常</Select.Option>
                <Select.Option value="2">停用</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="角色描述"
              name="roleDescription"
              style={{ marginLeft: "25px" }}
            >
              <Input.TextArea rows={5} cols={104} />
            </Form.Item>
            <div
              className="addClose"
              onClick={() => {
                setOpen(false);
              }}
            ></div>
            <div className="addBtn">
              <Form.Item>
                <Button
                  type="primary"
                  style={{
                    background: "#69657e",
                    position: "absolute",
                    top: "160px",
                    left: "-420px",
                  }}
                  htmlType="submit"
                >
                  保存
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>

      {/* 新增 */}
      <div className="add">
        <Drawer
          title="角色管理 - 新增"
          destroyOnClose={true}
          placement={placementAdd}
          closable={false}
          onClose={onCloseAdd}
          open={openAdd}
          key={placement}
          contentWrapperStyle={{
            position: "absolute",
            top: "25%",
            left: "20%",
            width: "70%",
          }}
        >
          <Form
            className="addForm"
            layout="inline"
            onFinish={onSearch}
            style={{ position: "relative", justifyContent: "center" }}
          >
            <Form.Item
              label="角色类型"
              name="roleType"
              rules={[{ required: true }]}
            >
              <Select style={{ width: 180 }} placeholder="请选择">
                <Select.Option value="系统角色">系统角色</Select.Option>
                <Select.Option value="机构角色">机构角色</Select.Option>
                <Select.Option value="销售角色">销售角色</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="角色名称"
              name="roleName"
              style={{ margin: "0 10px 8px 8px" }}
              rules={[
                {
                  required: true,
                  message: "必须添加姓名",
                },
              ]}
            >
              <Input placeholder="请输入角色名称" />
            </Form.Item>
            <Form.Item label="状态" name="status" rules={[{ required: true }]}>
              <Select style={{ width: 180 }} placeholder="请选择">
                <Select.Option value="1">正常</Select.Option>
                <Select.Option value="2">停用</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="角色描述"
              name="roleDescription"
              style={{ marginLeft: "25px" }}
            >
              <Input.TextArea rows={5} cols={104} />
            </Form.Item>
            <div
              className="addClose"
              onClick={() => {
                setOpen(false);
              }}
            ></div>
            <div className="addBtn">
              <Form.Item>
                <Button
                  type="primary"
                  style={{
                    background: "#69657e",
                    position: "absolute",
                    top: "160px",
                    left: "-420px",
                  }}
                  htmlType="submit"
                >
                  保存
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
    </div>
  );
};
export default RoleManagement;